@charset 'utf-8';
@import 'reset';
* {
    margin: 0;
    padding: 0;
}
body{
    background-color: #f8f3f0;
}
.container {
    width: 1920px;
    .bg {
        width: 1920px;
        height: 671px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    // 优惠券
    .coupon{
        padding-top: 83px;
        width: 1920px;
        height: 276px;
        box-sizing: border-box;
        .ticket{
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: 1016px;
            height: 196px;
            border: 4px solid #b78b55;
            box-sizing: border-box;
            li{
                position: relative;
                width: 166px;
                height: 116px;
                span{
                    display: inline-block;
                    width: 14px;
                    height: 16px;
                    line-height: 16px;
                    font-size: 20px;
                    color: #105335;
                }
                img{
                    margin: 0 7px;
                    display: inline-block;
                    width: 35px;
                    height: 58px;
                    vertical-align: top;
                }
                i{
                    width: 53px;
                    height: 16px;
                    line-height: 16px;
                    font-size: 16px;
                    vertical-align: bottom;
                }
                p{
                    margin-top: 8px;
                    width: 104px;
                    height: 18px;
                    font-size: 18px;
                    line-height: 18px;
                }
                button{
                    margin: 8px 0 0 9px ;
                    width: 85px;
                    height: 20px;
                    background-color: #f46a70;
                    border: none;
                    font-size: 14px;
                    text-align: center;
                    color: #fff;
                }
                div{
                    position: absolute;
                    right: 11px;
                    top: 0;
                    height: 116px;
                    border: 1px solid #105335;
                    transform: rotate(10deg);
                }
            }
            li:first-child{
                margin-left: 110px;
            }
            li:nth-child(2){
                margin-left: 61px;
                img{
                    width: 73px;
                    height: 59px;
                }
                p{
                    margin-left: 7px;
                    width: 91px;
                    height: 18px;
                }
            }
            li:nth-child(3){
                margin-left: 61px;
                img{
                    width: 76px;
                    height: 59px;
                }
                p{
                    margin-left: 7px;
                    width: 91px;
                    height: 18px;
                }
            }
            li:nth-child(4){
                width: 104px;
                height: 113px;
                margin-left: 61px;
                img{
                    margin-right: 0;
                    display: inline-block;
                    width: 77px;
                    height: 59px;
                }
                p{
                    width: 103px;
                    height: 18px;
                }
            }
        }
    }
    // 流行趋势
    .fashion{
        position: relative;
        margin: 107px 667px 0 596px;
        width: 657px;
        height: 139px;
        span{
            position: absolute;
            top: 18px;
            display: inline-block;
            width: 301px;
            height: 58px;
            line-height: 58px;
            font-size: 60px;
            color: #b0822b;
        }
        span:nth-child(2){
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            width: 319px;
            height: 85px;
            font-weight: bold;
            line-height: 85px;
            font-size: 79px;
            color: black;
        }
        p{
            position: absolute;
            top: 102px;
            left: 28px;
            width: 601px;
            height: 37px;
            line-height: 37px;
            font-size: 51px;
            color: #b4b3bd;
        }
    }
    // 商品
    .commodity{
        padding-top: 43px;
        box-sizing: border-box;
        margin-top: 85px;
        margin-left: 443px;
        width: 1149px;
        height: 1250px;
        li{
            height: 341px;
            img{
                display: inline-block;
                margin-left: 3px;
                width: 473px;
                height: 341px;
                vertical-align: top;
            }
            .title{
                position: relative;
                display: inline-block;
                margin-left: 158px;
                width: 317px;
                height: 336px;
                box-sizing: border-box;
                .text{
                    display: block;
                    width: 184px;
                    height: 29px;
                    line-height: 29px;
                    margin-left: 132px;
                    font-size: 30px;
                }
                .text::after{
                    position: absolute;
                    top: 41px;
                    left: 0;
                    display: block;
                    content: '';
                    width: 315px;
                    height: 1px;
                    background-color: #7d7d7d;
                }
                h3{
                    position: absolute;
                    top: 52px;
                    width: 313px;
                    height: 42px;
                    line-height: 42px;
                    font-size: 42px;
                    color: #bd9c6f;
                }
                .title_box{
                    position: absolute;
                    top: 122px;
                    width: 71px;
                    height: 71px;
                    border-radius: 50%;
                    border: 1px solid #7d7d7d;
                    span{
                        margin: 16px auto;
                        display: block;
                        width: 36px;
                        height: 39px;
                        line-height: 19px;
                        font-size: 18px;
                        color: #010101;
                    }
                }
                .title_one{
                    left: 43px;
                }
                .title_two{
                    left: 144px;
                }
                .title_thr{
                    right: 0;
                }
                i{
                    position: absolute;
                    top: 218px;
                    right: 2px;
                    display: block;
                    width: 127px;
                    height: 17px;
                    line-height: 17px;
                    font-size: 18px;
                }
                .snap_up{
                    position: absolute;
                    top: 287px;
                    right: 8px;
                    width: 253px;
                    height: 49px;
                    span{
                        display: inline-block;
                        width: 14px;
                        height: 16px;
                        line-height: 16px;
                        font-size: 20px;
                        color: #105335;
                        vertical-align: bottom;
                    }
                    img{
                        width: 88px;
                        height: 49px;
                    }
                    button{
                        margin-left: 33px;
                        width: 105px;
                        height: 26px;
                        border: none;
                        background-color: #f26b6e;
                        vertical-align: bottom;
                        span{
                            width: 72px;
                            height: 17px;
                            line-height: 17px;
                            font-size: 18px;
                            color: #fff;
                        }
                    }
                    button::after{
                        position: absolute;
                        top: 14px;
                        right: -11px;
                        display: block;
                        content: '';
                        width: 23px;
                        height: 23px;
                        border-top: 4px solid #f26b6e;
                        border-right: 4px solid #f26b6e;
                    }
                }
            }
        }
        li:nth-child(2){
            margin-top: 65px;
            height: 353px;
            img{
                width: 473px;
                height: 341px;
            }
            .title{
                margin: 13px 115px 0 47px;
            }
        }
        li:last-child{
            padding-left: 80px;
            margin-top: 110px;
            height: 341px;
            img{
                width: 473px;
                height: 341px;
            }
            .title{
                margin-left: 131px;
            }
        }
    }
    // 爆款
    .hot_cake{
        margin-top: 112px;
        margin-left: 701px;
        width: 530px;
        height: 84px;
        line-height: 84px;
        font-size: 88px;
        font-weight: 700;
        color: #bd9c6f;
        i{
            margin-top: 0;
            margin-left: 30px;
            margin-right: 10px;
            vertical-align: top;
            display: inline-block;
            font-weight: 100;
            font-size: 77px;
            color: #131212;
        }
    }
    // 爆款商品
    .hot_commodity{
        padding-top: 72px;
        margin-top: 30px;
        height: 1144px;
        box-sizing: border-box;
        background-color: #ebe3d6;
        .hot{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            margin: 0 auto;
            width: 985px;
            height: 987px;
            li{
                width: 267px;
                height: 476px;
                img{
                    width: 267px;
                    height: 282px;
                }
                .text{
                    position: relative;
                    margin: 18px auto 0;
                    width: 260px;
                    height: 176px;
                    .safeguard{
                        margin: 0 auto;
                        display: block;
                        width: 160px;
                        height: 23px;
                        line-height: 23px;
                        font-size: 24px;
                    }
                    .safeguard::after{
                        position: absolute;
                        top: 33px;
                        left: 0;
                        display: block;
                        content: '';
                        width: 260px;
                        height: 1px;
                        background-color: #7d7d7d;
                    }
                    p{
                        position: absolute;
                        top: 38px;
                        left: 18px;
                        width: 231px;
                        height: 31px;
                        line-height: 31px;
                        font-size: 33px;
                        color: #bd9c6f;
                    }
                    .text_btn{
                        position: absolute;
                        bottom: 0;
                        width: 253px;
                        height: 49px;
                        line-height: 49px;
                        div{
                            position: absolute;
                            top: 31px;
                            width: 14px;
                            height: 16px;
                            line-height: 16px;
                            font-size: 20px;
                            color: #bd9c6f;
                        }
                        img{position: absolute;
                            left: 21px;
                            width: 88px;
                            height: 49px;
                        }
                        button{
                            position: absolute;
                            top: 21px;
                            right: 11px;
                            width: 105px;
                            height: 26px;
                            background-color: #f26b6e;
                            border: none;
                            span{
                                margin: 5px 17px 0 16px;
                                display: block;
                                width: 72px;
                                height: 17px;
                                line-height: 17px;
                                font-size: 18px;
                                color: #fff;
                            }
                        }
                        button::after{
                            position: absolute;
                            top: -9px;
                            right: -11px;
                            display: block;
                            content: '';
                            width: 23px;
                            height: 23px;
                            border-top: 4px solid #f26b6e;
                            border-right: 4px solid #f26b6e;
                        }
                    }
                }
            }
        }
    }
    // 潮流
    .trend{
        padding-top: 46px;
        height: 1864px;
        box-sizing: border-box;
        background-color: #f8f3f0;
        // 流行趋势
        .fash_comm{
            margin: 0 auto;
            width: 528px;
            height: 136px;
            span{
                width: 250px;
                height: 48px;
                line-height: 48px;
                font-size: 50px;
            }
            span:nth-child(2){
                width: 264px;
                height: 71px;
                line-height: 71px;
                font-size: 66px;
            }
            p{
                width: 482px;
                height: 29px;
                line-height: 29px;
                font-size: 41px;
            }
        }
        // 商品
        .trend_product{
            margin: 196px 325px 93px 389px;
            width: 1206px;
            height: 1047px;
            li{
                padding-left: 49px;
                box-sizing: border-box;
                position: relative;
                height: 574px;
                img{
                    margin-top: 4px;
                    width: 581px;
                    height: 570px;
                }
                .text{
                    margin-left: 25px;
                    display: inline-block;
                    width: 367px;   
                    height: 216px;
                    vertical-align: top;
                    h2{
                        display: inline-block;
                        width: 191px;   
                        height: 39px;
                        line-height: 39px;
                        font-size: 38px;
                        color: #ad7c31;
                    }
                    span{
                        margin-left: 15px;
                        display: inline-block;
                        width: 154px;
                        height: 32px;
                        font-size: 25px;
                        text-align: right;
                        color: #ad7c31;
                    }
                    p{
                        margin: 30px 30px 0 30px;
                        width: 299px;
                        height: 83px;
                        line-height: 20px;
                        font-size: 15px;
                        text-align: center;
                        color: #c2b197;
                    }
                    .price{
                        margin: 43px 96px 0 88px;
                        display: flex;
                        justify-content: space-between;
                        width: 176px;   
                        height: 19px;
                        span:first-child{
                            display: inline-block;
                            width: 76px;
                            height: 16px;
                            line-height: 16px;
                            font-size: 18px;
                            color: #896b4c;
                            text-decoration: line-through;
                        }
                        span:last-child{
                            display: inline-block;
                            width: 94px;
                            height: 19px;
                            line-height: 19px;
                            font-size: 23px;
                            color: #d6353b;
                        }
                    }
                }
                img:nth-child(3){
                    position: absolute;
                    top: 91px;
                    right: 0;
                    width: 239px;
                    height: 206px;
                }
                img:nth-child(4){
                    position: absolute;
                    top: 328px;
                    right: 188px;
                    width: 424px;
                    height: 194px;
                }
            }
            li:last-child{
                position: relative;
                padding: 0;
                margin-top: 25px;
                height: 448px;
                img:first-child{
                    position: absolute;
                    top: 101px;
                    left: 0;
                    width: 150px;
                    height: 143px;
                }
                .text{
                    margin: 0;
                    position: absolute;
                    left: 137px;
                    top: 38px;
                }
                img:nth-child(3){
                    position: absolute;
                    top: 220px;
                    right: 580px;
                    width: 216px;
                    height: 227px;
                }
                img:nth-child(4){
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 576px;
                    height: 411px;
                }
            }
        }
        // 桌子 
        .desk{
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            width: 1328px;
            height: 326px;
            li{
                position: relative;
                width: 325px;
                height: 326px;
                background-color: #e4dace;
                img{
                    position: absolute;
                    top: 22px;
                    right: 19px;
                    width: 265px;
                    height: 216px;
                }
                h2{
                    position: absolute;
                    top: 258px;
                    right: 99px;
                    width: 130px;
                    height: 26px;
                    line-height: 26px;
                    font-size: 26px;
                    color: #ad7c31;
                }
                span{
                    position: absolute;
                    top: 296px;
                    left: 98px;
                    width: 51px;
                    height: 9px;
                    line-height: 9px;
                    font-size: 12px;
                    color: #896b4c;
                    text-decoration: line-through;
                }
                span:last-child{
                    position: absolute;
                    top: 297px;
                    left: 161px;
                    width: 64px;
                    height: 11px;
                    line-height: 11px;
                    font-size: 15px;
                    color: #d6353b;
                    text-decoration: none;
                }
            }
        }
    }
    // 底部
    .footer{
        height: 76px;
        background-color: #bd9c6f;
    }
}
